<template>
  <view class="page-content">
    <view class="header-box">
      <!-- <image
        class="image_4"
        src="https://ide.code.fun/api/image?token=66078e54d52b7700115185b5&name=73e00fefe998196ad182009ca4210742.png"
      /> -->
      <u-swiper
        :list="detailInfo.photoImgArr"
        :circular="false"
        :effect3d="true"
        :autoplay="true"
        bg-color="transparent"
        height="700"
        mode="none"
        effect3d-previous-margin="0"
      ></u-swiper>
    </view>
    <view class="content-box" style="margin-top: -200rpx">
      <view class="flex-col relative section">
        <text class="self-start text_2">{{ detailInfo.petName }}</text>
        <view class="flex-col self-stretch group_4">
          <view class="flex-row items-center self-stretch group_5">
            <view class="section_2"></view>
            <text class="font ml-9">基本信息</text>
          </view>
          <view class="grid">
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">宠物名</text>
              <text class="mt-12 font_3">{{ detailInfo.petName }}</text>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">品种</text>
              <text class="font_3 mt-11">{{ detailInfo.breed }}</text>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">性别</text>
              <text class="font_3 mt-11">{{ detailInfo.sex }}</text>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">宠物年龄</text>
              <text class="mt-10 font_3">{{ detailInfo.age }}</text>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">疫苗接种情况</text>
              <text class="mt-10 font_3">{{
                detailInfo.ifVaccination ? '已接种' : '未接种'
              }}</text>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">体重</text>
              <text class="mt-10 font_3">{{ detailInfo.weight }}</text>
            </view>
          </view>
        </view>
        <view class="common-box">
          <form-item-title text="希望寻找"></form-item-title>
          <view class="grid">
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">品种</text>
              <text class="mt-12 font_3">{{ detailInfo.spouseVariety }}</text>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">年龄</text>
              <text class="font_3 mt-11">{{ detailInfo.spouseAge }}</text>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_2">颜色</text>
              <text class="font_3 mt-11">{{ detailInfo.spouseColor }}</text>
            </view>
          </view>
          <view class="group_1">
            <text class="font_2">备注</text>
            <view class="font_3 mt-11">
              {{ detailInfo.remark ? detailInfo.remark : '' }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-box">
      <view class="flex-row items-center group_5">
        <view class="flex-col items-start shrink-0">
          <text class="font_2 text_6">服务费用</text>
          <view class="group_8 mt-9">
            <text class="text_8">￥</text>
            <text class="text_7">{{ detailInfo.price }}</text>
            <text class="text_12">/次</text>
          </view>
        </view>
        <view
          class="flex-col justify-start items-center button text-wrapper ml-23"
          ><text class="font">聊一聊</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPair } from '@/api/cwbl.js'

import formItemTitle from 'components/index/form-item-title.vue'
export default {
  data() {
    return {
      detailInfo: null,
    }
  },
  onLoad: function (option) {
    this.getDetail(option.id)
  },
  methods: {
    async getDetail(id) {
      let res = await getPair(id)
      this.detailInfo = res.data
      this.detailInfo.photoImgArr = this.detailInfo.photo
        ? this.detailInfo.photo.split(',')
        : []
    },
  },
  components: {
    formItemTitle,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  .header-box {
    height: 744rpx;

    > image {
      height: 744rpx;
      width: 100%;
    }
  }

  .content-box {
    position: relative;
    z-index: 99;

    .mt-11 {
      margin-top: 22rpx;
    }

    .ml-9 {
      margin-left: 18rpx;
    }

    .section {
      margin: -88rpx 32rpx 0;
      padding-top: 60rpx;
      background-color: #ffffff;
      border-radius: 24rpx;

      .text_2 {
        margin-left: 44rpx;
        color: #000000;
        font-size: 48rpx;
        font-family: PingFang SC;
        font-weight: 700;
        line-height: 43.44rpx;
      }

      .group_4 {
        margin-top: 56rpx;

        .group_5 {
          padding: 0 32rpx;
        }

        .grid {
          margin-top: 20rpx;
          height: 365.72rpx;
          display: grid;
          grid-template-rows: repeat(3, minmax(0, 1fr));
          grid-template-columns: repeat(2, minmax(0, 1fr));
          row-gap: 0;
          column-gap: 112.38rpx;

          .grid-item {
            padding: 28rpx 40rpx;
            width: 287.8rpx;
          }
        }

        .font_2 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 21.88rpx;
          color: #999999;
        }

        .text_3 {
          margin-left: 40rpx;
          margin-top: 28rpx;
          line-height: 22.3rpx;
        }

        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.7rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_4 {
          margin-top: 16rpx;
          line-height: 34rpx;
          width: 586rpx;
        }
      }

      .group_6 {
        margin-top: 36rpx;
        padding: 8rpx 32rpx 40rpx;
        border-top: solid 8rpx #f6f6f6;

        .group_7 {
          padding: 44rpx 0 24rpx;

          .text_5 {
            line-height: 29.72rpx;
          }
        }

        .section_3 {
          padding: 194rpx 0 102rpx;
          border-radius: 16rpx;
          background-image: url('https://ide.code.fun/api/image?token=66078e54d52b7700115185b5&name=de0b72f0fb474b1d7d55dc8a74a3e1e7.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .section_4 {
            margin-left: 292rpx;
            background-color: #fbd610;
            box-shadow: 0rpx 8rpx 8rpx #00000040;
            border-radius: 50%;
            width: 24rpx;
            height: 24rpx;
            border-left: solid 4rpx #ffffff;
            border-right: solid 4rpx #ffffff;
            border-top: solid 4rpx #ffffff;
            border-bottom: solid 4rpx #ffffff;
          }
        }
      }

      .section_2 {
        background-color: #fbd610;
        border-radius: 6rpx;
        width: 8rpx;
        height: 40rpx;
      }

      .font {
        font-size: 32rpx;
        font-family: PingFang SC;
        line-height: 29.92rpx;
        font-weight: 700;
        color: #000000;
      }
    }
  }
  .common-box {
    padding: 32rpx 38rpx;
    border-top: 8rpx solid #f6f6f6;
    .grid {
      display: grid;
      grid-template-rows: repeat(1, minmax(0, 1fr));
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 0;
      column-gap: 112.38rpx;

      .grid-item {
        width: 287.8rpx;
      }
    }
    .group_1 {
      margin-top: 12rpx;
      .font_3 {
        line-height: 34rpx;
      }
    }
    .font_2 {
      font-size: 24rpx;
      font-family: PingFang SC;
      line-height: 21.88rpx;
      color: #999999;
    }

    .text_3 {
      margin-left: 40rpx;
      margin-top: 28rpx;
      line-height: 22.3rpx;
    }

    .font_3 {
      font-size: 28rpx;
      font-family: PingFang SC;
      line-height: 25.7rpx;
      font-weight: 700;
      color: #000000;
    }

    .text_4 {
      margin-top: 16rpx;
      line-height: 34rpx;
      width: 586rpx;
    }
  }
  .bottom-box {
    padding: 32rpx 0;
    background-color: #ffffff;

    .mt-9 {
      margin-top: 18rpx;
    }

    .ml-23 {
      margin-left: 46rpx;
    }

    .group_5 {
      padding: 0 32rpx;

      .font_2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 21.88rpx;
        color: #999999;
      }

      .text_6 {
        color: #000000;
        line-height: 22.34rpx;
      }

      .group_8 {
        line-height: 28.48rpx;

        .text_8 {
          color: #ff7676;
          font-size: 24rpx;
          font-family: D-DIN;
          line-height: 17.72rpx;
        }

        .text_7 {
          color: #ff7676;
          font-size: 40rpx;
          font-family: D-DIN;
          line-height: 28.48rpx;
        }
      }

      .button {
        flex: 1 1 0;

        .font {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 29.92rpx;
          font-weight: 700;
          color: #000000;
        }
      }

      .text-wrapper {
        padding: 28rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        overflow: hidden;
        height: 88rpx;
      }
    }
  }
}
</style>